<template>
  <el-form :model="formData" :rules="rules" :dictList="dictList" ref="formLabels"
           class="demo-formLabels" :label-width="labelWidth+'px'" v-bind="$attrs"
  >
    <el-row>
      <template v-for="item in formLabels">
        <el-col v-if="!item.hidden" :span="item.span ? item.span : 12">
          <!--   文本框   -->
          <el-form-item :label="item.label" :prop="item.field">
<!--            <span class="el-input__prefix" v-if="item.showPrefix">C</span>-->
            <el-input v-model="formData[item.field]" :clearable="true" :placeHolder="getPlaceHolder(item)" v-bind="item.attrs"
            :maxlength="item.maxlength"
                      :disabled="item.disabled" v-if="item.type == 'input'" @blur="handleEvent($event, item.field)"
            ></el-input>
            <!--   密码框   -->
            <el-input v-model="formData[item.field]" :clearable="true" show-password :placeHolder="getPlaceHolder(item)"
                      :disabled="item.disabled" v-bind="item.attrs" @change="handleEvent($event, item.field, 'change')"
                      v-if="item.type == 'password'"
            ></el-input>
            <!--   下拉框   -->
            <el-select v-model="formData[item.field]" :clearable="true" :placeholder="getPlaceHolder(item)" :disabled="item.disabled"
                       v-bind="item.attrs" v-if="item.type == 'select'"
                       :filterable="item.filterable"
                       @change="handleEvent($event, item.field, 'change')"
                       style="width: 100%"
            >
              <el-option v-for="(el, index) in dictList[item.list]" :key="index" :label="el.label"
                         :value="el.value"
              >
              </el-option>
            </el-select>
            <!--   级联选择器   -->
            <el-cascader v-model="formData[item.field]" :options="dictList[item.list]" v-if="item.type=='cascader'" :clearable="true" :props="item.props" style="width: 100%"
                         @change="handleEvent($event, item.field, 'change')"
            ></el-cascader>
            <!--   开关   -->
            <el-switch v-model="formData[item.field]" :disabled="item.disabled" v-bind="item.attrs"
                       @change="handleEvent($event, item.field, 'change')"
                       v-if="item.type == 'switch'"
            ></el-switch>
            <!--   复选框   -->
            <el-checkbox-group v-model="formData[item.field]" v-if="item.type == 'checkbox'" style="width: 100%"
                               @change="handleEvent($event, item.field, 'change')"
            >
              <el-checkbox v-for="el in dictList[item.list]" :label="el.label" :key="el.value" :disabled="item.disabled"
                           v-bind="item.attrs"
              >{{ el.label }}
              </el-checkbox>

            </el-checkbox-group>
            <!--   单选框   -->
            <el-radio-group v-model="formData[item.field]" v-bind="item.attrs" v-if="item.type == 'radio'"
                            style="width: 100%" @change="handleEvent($event, item.field, 'change')"
            >
              <el-radio v-for="el in dictList[item.list]" :label="el.value" :key="el.value" :disabled="item.disabled"
                        v-bind="item.attrs" style="margin-bottom:5px"
              >
                {{ el.label }}
              </el-radio>
            </el-radio-group>
            <!--   文本域   -->
            <el-input type="textarea" :clearable="true" v-model="formData[item.field]" :placeHolder="getPlaceHolder(item)"
                      style="width: 100%"
                      v-if="item.type == 'textarea'"
                      @blur="handleEvent($event, item.field)"
            ></el-input>
            <!--   计数器   -->
            <el-input-number v-if="item.type=='number'" controls-position="right" v-model="formData[item.field]"
                             @change="handleEvent($event, item.field,'change')" v-bind="item.attrs"
                             :min="item.min?item.min:0"
            ></el-input-number>
            <!--   日期时间选择器   -->
            <el-date-picker
              size="mini"
              style="width: 100%"
              v-model="formData[item.field]"
              type="datetime"
              :value-format="item.format"
              placeholder="选择日期时间"
              v-if="item.type=='dateTime'"
              @change="handleEvent($event, item.field, 'change')"
            >
            </el-date-picker>
            <!--    日期选择器    -->
            <el-date-picker
              style="width: 100%"
              v-model="formData[item.field]"
              type="date"
              placeholder="选择日期"
              v-if="item.type=='datePicker'"
              @change="handleEvent($event, item.field, 'change')"
            >
            </el-date-picker>
            <!--    日期区间选择器    -->
            <el-date-picker
              style="width: 100%"
              v-model="formData[item.field]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-if="item.type == 'dateRange'"
              @change="handleEvent($event, item.field, 'change')"
            >
            </el-date-picker>
            <!--    插槽    -->
            <slot :name="'filter-'+item.field" v-if="item.type=='slot'"></slot>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
    <el-form-item style="flex: 1; display: flex; justify-content: end;">
      <slot></slot>
    </el-form-item>
    <div style="width:100%;text-align:right;" v-show="!btnHidden">
      <el-button type="primary" @click="handleFormSubmit('formLabels')">保 存</el-button>
      <el-button @click="resetForm('formLabels')">取消</el-button>
    </div>
  </el-form>
</template>

<script>
import { cloneDeep } from '@/utils/loadash-es'

export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    formLabels: {
      type: Array,
      default() {
        return []
      }
    },
    fieldList: {
      type: Array,
      default() {
        return []
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    },
    dictList: {
      type: Object,
      default() {
        return {}
      }
    },
    labelWidth: {
      type: String,
      default() {
        return '100'
      }
    },
    btnHidden: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      // defaultData: this.data,
      // formData: this.data,
      defaultKeyList: []
    }
  },
  computed: {
    formData() {
      return this.data
    },
    defaultData(){
      return this.data
    }
  },
  watch: {
    // data: {
    //   handler(newVal) {
    //     this.formData= Object.assign(this.formData, newVal)

    //   },
    //   deep: true,
    //   immediate: true
    // },
    formData(newVal) {
    },

  },
  methods: {
    /**
     *定义占位符
     * @param item
     */

    getPlaceHolder(item) {
      let placeHolder = ''
      if (
        item.type === 'input' ||
        item.type === 'number' ||
        item.type === 'textarea'
      ) {
        placeHolder = `请输入${item.label}`
      } else if (item.type === 'select' || item.type === 'cascader') {
        placeHolder = `请选择${item.label}`
      } else if (item.type === 'date') {
        placeHolder = `请选择${item.label}`
      }
      return placeHolder
    },
    /**
     * 提交 校验
     * @returns {Promise<unknown>}
     */
    handleFormSubmit(formName) {
      let _self = this
      return new Promise((resolve) => {
        _self.$refs[formName]
          .validate()
          .then(() => {
            resolve(_self.formData)
            this.$emit('handleSubmitEvent', _self.formData)
          })
          .catch(() => {

            _self.$message({
              message: '请完善表单！',
              type: 'error'
            })
          })
      })
    },
    /**
     * 取消
     * */
    resetForm(formName) {

      this.$refs[formName].resetFields()
      this.$emit('handleCancel')
    },
    /**
     * @func 事件处理
     * @desc 📝
     */
    handleEvent(event, val, change) {
      this.defaultKeyList.indexOf(val) < 0 && this.defaultKeyList.push(val)
      let obj = {
        value: change === 'change' ? event : event.target.value,
        field: val
      }
      this.$forceUpdate()
      this.$emit('handleEvent', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin: 10px;
}

.el-form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.el-input__prefix{
  z-index:100;
}
</style>
